<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冠灵家居</title>
<style>
#play IMG { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } 
#play { width: 530px } 
#play_text { WIDTH: 320px; HEIGHT: 30px;float:right; } 
#play_text UL { DISPLAY: block; FILTER: Alpha(Opacity=80); PADDING-TOP: 1px; LIST-STYLE-TYPE: none; _padding-top: 0px; opacity: 0.8;FLOAT: right;margin-top:3px; } 
#play_text UL LI { DISPLAY: block; FONT-SIZE: 9px; padding-top: 3px; FLOAT: left; MARGIN: 2px; WIDTH: 15px; CURSOR: pointer; COLOR: #7F0019; FONT-FAMILY: "Arial"; HEIGHT: 15px; BACKGROUND-COLOR: #fff; BORDER: 1px solid #CECECE; TEXT-ALIGN: center !important; *text-indent: 3px } 
#play_list A { DISPLAY: block; OVERFLOW: hidden; } 
#play_list img { vertical-align:top !important; width:526px;height:468px;border:2px solid #000;}

</style>

<script type="text/javascript" src="../js/jquery.pack.js"></script>

</head>

<body>
        <table><tr><td>
					<div id="play">
							<div id="play_list">
								<a href="#"><img src="images/01.jpg" /></a> 
								<a href="#"><img src="images/02.jpg" /></a> 
								<a href="#"><img src="images/01.jpg" /></a> 
								<a href="#"><img src="images/02.jpg" /></a>
							</div>
							<div id="play_text">
									<ul>
											<li>1</li> 
											<li>2</li> 
											<li>3</li> 
											<li>4</li>
									</ul>
							</div>
					</div>
					<div style="overflow:hidden;clear:both;"></div>
					
					<script type="text/javascript"> 
							var t = n = 0, count=4;
							 count= $("#play_list a").size()
							 $("#play_list a:not(:first-child)").hide();
							 $("#play_text li").eq(0).css({"background":"#7f0019","color":"#fff","font-weight":"bolder"})
							 $("#play_text li").mouseover(function() {
							  var i = $(this).text() - 1;
							  n = i;
							  if (i >= count) return;
							  $("#play_list a").filter(":visible").hide().parent().children().eq(i).show();
							  $(this).css({"background":"#7f0019","color":"#fff","font-weight":"bolder"})
							  			 .siblings()
							  			 .css({"background":"#fff","color":"#7f0019","font-weight":"normal"});
							 });
							 t = setInterval("showAuto()", 10000);
							 $("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 10000);});
							function showAuto()
							{
							 n = n >= (count - 1) ? 0 : ++n;
							 $("#play_text li").eq(n).trigger('mouseover');
							}
					</script>
        </td></tr></table>
        
</body>
</html>        